<!--
 * @Author: zw 775925302@qq.com
 * @Date: 2023-02-11 10:45:36
 * @LastEditors: zhangwei
 * @LastEditTime: 2023-02-17 12:39:12
 * @FilePath: /z-lowcode-designerz/src/views/designer/web/designer-page/index.vue
-->
<template>
  <DndProvider :backend="HTML5Backend">
    <div class="rowStart">
      <widget-panel style="width: 370px; min-width: 370px" />

      <div style="width: 500px; min-width: 500px" class="rowCenter">
        <content-panel />
      </div>

      <setting-panel style="flex: 1; max-width: 500px" />
    </div>
  </DndProvider>
</template>

<script setup lang="ts" name="DesignerPage">

import { useDesign } from "@/hooks/lowcode/useDesign";
import { DndProvider } from "vue3-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import WidgetPanel from "./widget-panel/index.vue";
import ContentPanel from "./content-panel/index.vue";
import SettingPanel from "./setting-panel/index.vue";
import { useScreenSize } from "@/hooks/useScreenSize";

// 全局注入设计器提供者
const designer = useDesign();

const { width, height } = useScreenSize();
</script>

<style scoped lang="scss"></style>
